<template>
  <div class="app-container">
    <el-form :model="queryParams" :inline="true">
      <el-form-item label="选择小区：">
        <el-select @change="plotChange" v-model="queryParams.plotId" placeholder="请选择" clearable>
          <el-option v-for="dict in xiaoquData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item></el-form-item>
    </el-form>

    <!-- <div class="list_box">
      <div class="tag color1"></div>
      <span class="word">23.1-26.9°C</span>
      <div class="tag color2"></div>
      <span class="word">27-30°C</span>
      <div class="tag color3"></div>
      <span class="word">31-36°C</span>
      <div class="tag color4"></div>
      <span class="word">36-41°C</span>
      <div class="tag color5"></div>
      <span class="word">设备离线</span>
    </div> -->

    <div class="box">
      <div class="info_box pointerEvents" v-show="flag">
        <div class="info_word">楼栋：{{ buildinfo.buildName }}</div>
        <div class="info_word">供热面积：{{ buildinfo.heatArea }}㎡</div>
        <div class="info_word">单元数：{{ buildinfo.unitCount }}</div>
        <div class="info_word">热用户比：{{ buildinfo.heatScale }}</div>
      </div>
      <BuildingWave @buildMousemove="buildMousemove" @buildMouseout="buildMouseout" :data="balancedBuildVoList"
        @buildClick="goUnit"></BuildingWave>
    </div>

  </div>
</template>

<script>
import { listCPlotSelect, listBuildSelect } from "@/api/system/utils";
import { getBuildList } from '@/api/balancedView/balancedView'
import BuildingWave from "@/components/BuildingWave"
export default {
  components: { BuildingWave },
  data() {
    return {
      queryParams: {
        plotId: ''
      },
      xiaoquData: [],
      balancedBuildVoList: [],
      buildinfo: {
        buildName: '',
        buildinfo: null,
        unitCount: null,
        heatScale: null,
      },
      time: 0,
      flag: false,
    }
  },
  created() {
    listCPlotSelect({}).then(res => {
      this.xiaoquData = res.rows
      if (res.rows.length > 0) {
        this.queryParams.plotId = res.rows[0].value
        this.getBuildListFun(res.rows[0].value)
      }
    })
  },
  methods: {
    //获取楼栋列表
    getBuildListFun(plotId) {
      getBuildList({ plotId }).then(res => {
        this.balancedBuildVoList = res.data.balancedBuildVoList ? res.data.balancedBuildVoList : []
      })
    },
    plotChange(id) {
      this.getBuildListFun(id)
    },
    goUnit({ mesh }) {
      console.log(mesh.userData);
      let buildId = mesh.userData.buildId
      this.$router.push({
        path: `/balancedView/unit`,
        query: {
          plotId: this.queryParams.plotId,
          buildId: buildId,
        }
      })
    },
    buildMousemove({ mesh }) {
      this.time = new Date().getTime()
      let userData = mesh.userData
      this.buildinfo = userData
      this.flag = true
    },
    buildMouseout() {
      let time = new Date().getTime()
      this.time = time
      setTimeout(() => {
        if (this.time === time) {
          this.flag = false
          console.log('关闭')
        } else {
          this.flag = true
          console.log('显示')
        }
      }, 1000)
    }
  },
}
</script>

<style lang="scss" scoped>
.list_box {
  display: flex;
  justify-content: center;
  align-items: center;

  .tag {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: 50%;
  }

  .word {
    margin-right: 20px;
    font-size: 20px;
    color: #fff;
  }

  .color1 {
    background: #00B4FF;
  }

  .color2 {
    background: #FAC74F;
  }

  .color3 {
    background: #FE9A76;
  }

  .color4 {
    background: #FF0045;
  }

  .color5 {
    background: #DDDDDD;
  }
}

.box {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  height: calc(100vh - 290px);
  position: relative;

  .img {
    width: 100%;
    cursor: pointer;
  }
}

.info_box {
  pointer-events: none;
  width: 277px;
  position: absolute;
  z-index: 9;
  background: linear-gradient(180deg, #000a27 0%, #003aff 100%);
  top: 40%;
  left: 55%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0px -1px 3px 0px rgba(75, 184, 255, 0.5);
  opacity: 0.7;
  border: 1px solid;
  border-image: linear-gradient(315deg,
      rgba(255, 255, 255, 1),
      rgba(0, 209, 255, 1)) 1 1;

  .info_word {
    font-size: 25px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 30px;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
